<template>
    <div class='insurance-block'>
        <div class="containers">
            <dl class='bottom-links'>
                <dt>热门城市</dt>
                <dd v-for="(add, index) in addHotel" :key="index">{{add.name}}</dd>
            </dl>
            <dl class='bottom-links'>
                <dt>热门房源</dt>
                <dd v-for="(re, index) in resource" :key="index">{{re.name}}</dd>
            </dl>
        </div>
    </div>
</template>
<script>
export default {
    name:'HotelFooter',
    data() {
        return {
            addHotel:[
                {name:'北京的民宿'},
                {name:'上海的民宿'},
                {name:'武汉的民宿'},
                {name:'南京的民宿'},
                {name:'杭州的民宿'},
                {name:'厦门的民宿'},
                {name:'三亚的民宿'},  
            ],
            resource:[
                {name:'有厨具的民宿'},
                {name:'有洗衣机的民宿'},
                {name:'武汉的民宿'},
                {name:'特价的民宿'},
                {name:'限时折扣的民宿'},
                {name:'适合情侣的民宿'},
                {name:'别墅'},  
            ]
        }
    },
}
</script>
<style lang="less" scoped>
    .insurance-block{
      
        padding: 0 0 40px;
        width: 100%;
        background-color: #f5f6fa;
        .containers{
            margin: 0 auto;
            padding: 0 15px;
            .bottom-links{
                white-space: nowrap;
                padding-bottom: 1.42857143em;
                line-height: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                display: flex;
                justify-content: space-around;
                dt{
                    display: inline-block;
                    width: 6.85714286em;
                    font-weight: 700;
                }
                dd{
                    display: inline;
                    color: #666;
                }
            }
        }
    }
    
</style>